<template>
    <div :class="propJson.editFlag ? 'editorContainer' : ''">
        <Editor v-model="modelValue.variableValue" :init="init" style="z-index: 1000000"></Editor>
    </div>
</template>

<script setup lang="ts" name="RichEditorComponent">
import {reactive, ref, onMounted, computed, defineProps} from "vue";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import {getCommonParamObj} from "@/utils/commonParamUtil.ts";

let props = defineProps(['propJson', 'commonParam']);
let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

//用于接收外部传递进来的富文本
let modelValue = computed(() => {
    let bindVariable= propJson.value.contentVariable;
    // 获取全局变量中的值
    return getCommonParamObj(commonParam.value, bindVariable)
})

const init = reactive({
    base_url: '/tinymce',
    language_url: "/tinymce/langs/zh_CN.js", // 中文语言包路径
    language: "zh_CN",
    skin_url: "/tinymce/skins/ui/tinymce-5",
    min_height: 770,
    max_height: propJson.value.maxHeight === "" ? "" : parseInt(propJson.value.maxHeight, 10),
    toolbar_mode: "wrap",
    menubar: propJson.value.isShowMenuBar,
    z_index: 30000000000,
    plugins: "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media code codesample table charmap nonbreaking insertdatetime advlist lists wordcount autosave autoresize",
    toolbar: propJson.value.isShowToolbar ? "code undo redo | cut copy paste | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent lineheight | \
    styleselect formatselect fontselect fontsize | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap hr pagebreak insertdatetime | fullscreen preview" : false,
    content_style: "p {margin: 5px 0;}",
    font_size_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
    font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
    branding: false,
    promotion: false,
    //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
    images_upload_handler: (blobInfo) => {
        return new Promise((resolve, reject) => {
            const blob = blobInfo.blob();
            const mimeType = blob.type || 'image/jpeg';
            // 文件大小限制（2MB）
            const maxSize = 2 * 1024 * 1024;
            if (blob.size > maxSize) {
                reject(`图片大小不能超过 2MB，当前图片为 ${(blob.size / 1024 / 1024).toFixed(2)}MB`);
                return;
            }
            // 支持的文件类型
            const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
            if (!allowedTypes.includes(mimeType)) {
                reject('仅支持 JPG、PNG、GIF 和 WebP 格式的图片');
                return;
            }
            try {
                const base64 = blobInfo.base64();
                const img = `data:${mimeType};base64,${base64}`;
                resolve(img);
            } catch (error) {
                reject(`图片处理失败: ${error.message}`);
            }
        });
    }
});

//在onMounted中初始化编辑器
onMounted(() => {
    tinymce.init({});
});

</script>

<style lang="less">
.tox-tinymce-aux {
    z-index: 9999 !important;
}

.editorContainer {
    padding-left: 10px;
    padding-right: 10px;
}
</style>